<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>有人智造-出库段看板</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.8.17/css/layui.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.8.17/layui.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <!--    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.esm.min.js"></script>-->
    <link rel="icon" href="/static/img/logo.png" type="image/x-icon"> <!-- 链接到favicon.ico文件 -->
</head>
<style>
    .body{
        height: 1500px;
        /*background-color: #f5f7fa;*/
        font-size: 25px;
        background: linear-gradient(to bottom right, blue, pink);
        background-image: url("/static/img/017d6a5c513b9ca801213f26c6f65d.png@2o.png");
        /*background-image: url("http://suzhou.usr.so:58082/mes/static/img/home_bg.1f5d3e97.png");*/
        background-size: cover;
    }

    h1{
        width: 30%;
        margin: 0 auto;
        color: white;
        background: linear-gradient(-45deg, transparent 34px, #134194 0) right,
        linear-gradient(45deg, transparent 34px, #134194 0) left;
        background-size: 50% 100%;
        background-repeat: no-repeat;
        margin-bottom: 20px;
    }
    h3{
        width: 100%;
        height: 30px;
        line-height: 30px;
        margin: 0 auto;
        color: white;
        background: linear-gradient(-45deg, transparent 14px, #134194 50px) right;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        margin-bottom: 20px;
        padding-left: 20px;
        /*font-size: 20px;*/
    }
    .divTop{
        height: 60%;
        /*background-color: red;*/
        margin-bottom: 20px;
        display: flex;
    }
    .top1{
        width: 25%;
        height: 510px;
        margin-right: 30px;
        /*background-color: #7bd4ce;*/
        border: 1px solid darkgray; /* 设置 <div> 元素的边框 */
        box-shadow: 5px 5px 10px #888888; /* 设置边框阴影 */
        background: linear-gradient(to bottom right, white, blue);
    }
    .top11{
        width: 100%;
        height: 80px;
        background-color: white;
        border-radius: 50px;
        display: flex;
        margin-top: 50px;
    }
    .top111{
        width: 35%;
        height: 80px;
        border-radius: 50px 0 0 50px;
        /*background-color: red;*/
        text-align: center;
        color: white;
        line-height: 80px;
        /*font-size: 15px;*/
        background: linear-gradient(to bottom right, blue, pink);
    }
    .top112{
        width: 65%;
        height: 80px;
        border-radius: 0 50px 50px 0;
        background-color: green;
        text-align: center;
        color: white;
        line-height: 40px;
        /*font-size: 15px;*/
        background: linear-gradient(to bottom right,#666aff, #7bd4ce);
    }
    .top2{
        width: 82%;
        height: 510px;
        background-color: #caf2ff;
        border: 1px solid darkgray; /* 设置 <div> 元素的边框 */
        box-shadow: 5px 5px 10px #888888; /* 设置边框阴影 */
        /*font-size: 13px;*/
    }
    table th:nth-child(odd){
        background-color: #2bb9ba;
        color: white;
    }
    table th:nth-child(even){
        background-color:#134094;
        color: white;
    }
    table tr:nth-child(odd){
        background-color: #7bd4ce;
        color: white;
    }
    .container {
        max-width: 100%;
        width: 100%;
        /*background-color: red;*/
        height: 400px; /* 设置容器的高度 */
        overflow: auto; /* 启用垂直滚动 */
        overflow-y: hidden;
        overflow-x: hidden;
        position: relative; /* 相对定位以容纳滚动内容 */
        /*animation: scroll 10s linear infinite; !* 使用动画滚动 *!*/

    }
    .container1{
        width: 100%;
        padding: 0;
        margin-left: -20px;
        /*background-color: red;*/
        position: absolute; /* 绝对定位 */
        top: 0; /* 初始位置为顶部 */
        /*animation: scroll 50s linear infinite; !* 使用动画滚动 *!*/
        animation-name: scroll;
        animation-duration: 10000s;
        animation-timing-function: linear;
        /*animation-delay: 1s;*/
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-fill-mode: forwards;
    }


    .container2 {
        max-width: 100%;
        width: 100%;
        /*background-color: red;*/
        height: 350px; /* 设置容器的高度 */
        overflow: auto; /* 启用垂直滚动 */
        overflow-y: hidden;
        overflow-x: hidden;
        position: relative; /* 相对定位以容纳滚动内容 */
        /*animation: scroll 10s linear infinite; !* 使用动画滚动 *!*/
    }
    .container21 {
        width: 100%;
        /*padding: 0;*/
        /*margin-left: -20px;*/
        /*background-color: green;*/
        position: absolute; /* 绝对定位 */
        top: 0; /* 初始位置为顶部 */
        /*animation: scroll 50s linear infinite; !* 使用动画滚动 *!*/
        animation-name: scroll;
        /*animation-duration: 700s;*/
        animation-timing-function: linear;
        /*animation-delay: 1s;*/
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-fill-mode: forwards;
    }

    /*}*/
    /* 滚动动画 */
    @keyframes scroll {
        /*0% {*/
        /*    top: 0; !* 开始时回到顶部 *!*/
        /*}*/
        /*100% {*/
        /*    top: -100%; !* 结束时滚动到底部 *!*/
        /*}*/
        from {
            transform: translateY(0);
        }
        to {
            transform: translateY(-100%);
        }
    }



    .divBottom{
        height: 40%;
        /*background-color: green;*/
        /*font-size: 12px;*/
        margin-top: 50px;
    }
    .bottom1{
        width: 100%;
        height: 100%;
        margin-right: 100px;
        background-color: #caf2ff;
        border: 1px solid darkgray; /* 设置 <div> 元素的边框 */
        box-shadow: 5px 5px 10px #888888; /* 设置边框阴影 */
        margin-bottom: 10px;

    }
    .table1 tr th{
        padding: 0;
        text-align: center;
    }
    .table1 tr td{
        padding: 0;
        /*text-align: center;*/
    }
    .return{
        position: fixed;
        top: 10px;
        left:10px;
        width: 50px;
        height: 50px;
    }
</style>
<body class="body">
<div class="main" style="width: 100%;margin:0 auto;" >
    <img src="/static/img/return.png" alt="返回总控台" class="return">
    <h1 style="text-align: center ">出库段看板</h1>
                <!--    分为四块，数量一部分，当前待检任务单一部分，今日已检任务单一部分，今日不良数据一部分-->
                <div style="width: 100%;height: 90%; margin-top: 20px;">
                    <div class="divTop">
                        <div class="top1">
                            <h3>出库段数量统计</h3>
                            <div id="count2">
                                <div class="top11">
                                    <div class="top111">当前待出库</div>
                                    <div class="top112">
                                        数量：{$data3['counts']} <br>
                                        单据数:{$data3['count']}
                                    </div>
                                </div>
                                <div class="top11">
                                    <div class="top111">今日已出库</div>
                                    <div class="top112">
                                        数量：{$data4['counts']} <br>
                                        单据数:{$data4['count']}
                                    </div>
                                </div>
                                <div class="top11">
                                    <div class="top111">昨日已出库</div>
                                    <div class="top112">
                                        数量：{$count4s} <br>
                                        单据数:{$count4}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="top2">
                            <h3>当前待出库任务单</h3>
                            <!--                表头和表体分离-->
                            <div style="width: 100%;margin: 0 auto;">
                                <table class="table table1">
                                    <tr style="text-align: center;">
                                        <th width="40px">序号</th>
                                        <th width="150px">发货单号</th>
                                        <th width="70px">单据状态</th>
                                        <th width="100px">销售单号</th>
                                        <th width="200px">计划出库日期</th>
                                    </tr>
                                </table>
                            </div>
                            <div class="container">
                                <div class="container1" style="animation-duration:{$data3['counts']}s;">
                                    <table class="table table1">
                                        <tbody id="table3">
                                        {foreach $data3['data'] as $k=>$v}
                                        <tr style="text-align: center">
                                            <td width="40px">{$k+1}</td>
                                            <td width="150px">{$v['DOC_NO']}</td>
                                            <td width="70px">{$v['DOC_STATUS']}</td>
                                            <td width="100px">{$v['CONNECT_DOC']}</td>
                                            <td width="200px">{$v['PLAN_RECEIVE_DATE']}</td>
                                        </tr>
                                        {/foreach}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="divBottom">
                        <div class="bottom1">
                            <h3>今日已出库任务单列表</h3>
                            <!--                表头和表体分离-->
                            <div style="width: 100%;margin-top: -20px;margin-bottom: -15px">
                                <table class="table table1">
                                    <tr style="text-align: center">
                                        <th width="40px">序号</th>
                                        <th width="150px">发货单号</th>
                                        <th width="70px">单据状态</th>
                                        <th width="100px">销售单号</th>
                                        <th width="200px">计划出库日期</th>
                                        <th width="200px">实际出库日期</th>
                                    </tr>
                                </table>
                            </div>
                            <div class="{if $data4['counts']>=20}container2{/if}">
                                <div class="{if $data4['counts']>=20}container21{/if}" style="animation-duration:{$data4['counts']}s;">
                                    <table class="table table1" style="margin: 0 auto">
                                        <tbody id="table4">
                                        {foreach $data4['data'] as $k=>$v}
                                        <tr style="text-align: center">
                                            <td width="40px">{$k+1}</td>
                                            <td width="150px">{$v['DOC_NO']}</td>
                                            <td width="70px">{$v['DOC_STATUS']}</td>
                                            <td width="100px">{$v['CONNECT_DOC']}</td>
                                            <td width="200px">{$v['PLAN_RECEIVE_DATE']}</td>
                                            <td width="200px">{$v['CLOSE_TIME']}</td>
                                        </tr>
                                        {/foreach}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
           </div>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(".return").click(function (){
        window.history.back();
    })
</script>
</html>